<script setup>
import {defineExpose, nextTick, onMounted, onUnmounted, ref} from "vue";
import * as echarts from "echarts";

const emits = defineEmits(['chartClick']);

const main = ref();
const props = defineProps({
  theOption: {
    type: Object,
    default: () => {
      return {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  },
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "100%"
  },
  notMerge: {
    default: true
  }
})

let myChart;
const init = () => {
  myChart = echarts.init(main.value);
  myChart.setOption(props.theOption)
}

const chartClick = function (params) {
  emits("chartClick", {params, myChart});
}
const refreshedFn = () => {
  myChart.setOption(props.theOption)
}

onMounted(() => {
  nextTick(() => {
    init();
    myChart.on("click", chartClick);
  })
})

onUnmounted(() => {
  myChart?.clear?.()
})

defineExpose({
  refreshedFn
})
</script>

<template>
  <div :style="{width,height}" class="theEchartsBox" ref="main"></div>
</template>

<style scoped lang="less">
.theEchartsBox {
  width: 100%;
  height: 100%;
  // color: rebeccapurple;
}
</style>